<template>
  <div class="mt-5 bg-blue-200 p-5" title="子组件" :can-expan="false">
    <h3>孙-组件</h3>
    <ul>
      <li>props 接收到的参数, 普通对象 name:{{ name }} </li>
      <li>props 接收到的参数, 响应对象 car:{{ car }}</li>
      <li>$attrs 存储未使用props接收的参数: {{ $attrs }}</li>
      <li>解构品牌 brand: {{ brand }}<Button @click="changeBrand">修改</Button>, 祖同步修改</li>
      <li>
        <input v-model="inputData" />
        <Button @click="sendData">向祖组件发送数据</Button>
      </li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
  import { Button } from '@/components/Button';
  import { ref,toRefs } from 'vue';

  // 定义要接收从父组件传来的哪些参数
  let props = defineProps(['name', 'car', 'setData']);

  // 解构品牌
  let { brand } = toRefs(props.car);

  // 输入框的值
  let inputData = ref();

  // 修改品牌，则子组件、父组件全部同步修改
  function changeBrand(){
    brand.value += '~';
  }

  // 向父组件
  function sendData() {
    props.setData(inputData.value);
  }
</script>

<style lang="less" scoped>
  button {
    margin-left: 5px;
  }

  li {
    margin-top: 10px;
  }

  div {
    border-radius: 10px;
  }

  input {
    height: 25px;
    padding: 2px 5px;
    line-height: 25px;
  }
</style>
